import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Icon, Tabs, Button } from 'antd'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { settingActions } from 'reduxs'

const FormItem = Form.Item
const TextArea = Input.TextArea
const TabPane = Tabs.TabPane

@connect(
  state => ({
    auth                : state.Passport.auth,
    infoData            : state.Setting.infoData,
    getInfoPending      : state.Setting.getInfoPending,
    getInfoError        : state.Setting.getInfoError,
    getInfoMessage      : state.Setting.getInfoMessage,
    setInfoPending      : state.Setting.setInfoPending,
    setInfoError        : state.Setting.setInfoError,
    setInfoMessage      : state.Setting.setInfoMessage,
  }),
  dispatch => ({
    actions: bindActionCreators({ 
      ...settingActions
    }, dispatch)
  })
)
@Form.create()
export default class SettingPane extends PureComponent {

  static propTypes = {
    tag: PropTypes.oneOf(['base', 'paths', 'items', 'room', 'roomfish', 'parser', 'srv', 'types']),
    disabled: PropTypes.bool
  }
  
  static defaultProps = {
    tag: 'base',
    disabled: false
  }

  

  constructor (props) {
    super(props)
    this.state = {
      valueString: '',
      tagName: props.tag
    }
  }

  componentDidMount () {
    !this.props.disabled && this.props.actions.getInfo(this.state.tagName)
  }
  
  componentWillReceiveProps (nextProps) {
    const { getInfoError, getInfoMessage, infoData } = nextProps
    if (getInfoError !== this.props.getInfoError) {
      getInfoError === 0 && this.setState({ valueString: infoData[this.state.tagName] || '' })
    }
  }

  render () {
    const { form, disabled, getInfoPending, infoData } = this.props
    const { getFieldDecorator } = form
    let valueString = infoData[this.state.tagName] || ''
    return (
      <div style={{ marginTop: 15 }}>
        <TextArea 
          style={{ color: '#faad14', backgroundColor: '#333' }}
          autosize={{ minRows: 28, maxRows: 28 }} 
          value={this.state.valueString} 
          onChange={this.handleChangeValue}
          disabled={disabled}
          />
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 30 }}>
          <div>
            <Button 
              icon="reload" 
              onClick={this.handleClickReload} 
              loading={getInfoPending}
              disabled={valueString === this.state.valueString && valueString !== ''}
              >
              重新加载
            </Button>
          </div>
          <div>
            <Button 
              type="primary" 
              size="large" 
              icon="upload"
              onClick={this.handleClickSubmit}
              disabled={valueString === this.state.valueString}
              >
              提交应用
            </Button>
          </div>
        </div>
      </div>
    )
  }

  handleChangeValue = (e) => {
    this.setState({ valueString: e.target.value })
  }

  handleClickReload = () => {
    this.props.actions.getInfo(this.state.tagName)
  }

  handleClickSubmit = () => {
    console.log(this.state.valueString)
    this.props.actions.setInfo(this.state.tagName, this.state.valueString)
  }
}